import { StatusBar } from 'expo-status-bar';
import {StyleSheet,Text, ToastAndroid, TouchableOpacity, View,TextInput} from 'react-native';
import React, { useState } from "react";


export default function Forget ({navigation}){
  const [username, setUsername] = useState("");
  const [birthday, setBirthday] = useState("");
  
  const onBtn = () => {
    fetch('http://10.7.89.96:3000/forget',{
      method:'POST',
      headers:{
        'Content-Type':'application/json'
      },
      body:JSON.stringify({
        userName:username,
        birthday:birthday,
      })
    })
      .then(res => res.json())
      .then(res => {
        if(res.code == 200){
            alert(res.message[0].password)
        } else{
          ToastAndroid.show("找回失败", ToastAndroid.SHORT);
        }
      })
  };
  return (
    <View style={styles.container}>
      <TextInput
        placeholder="请输入用户名"
        onChangeText={text => setUsername(text)} //读取用户的输入,从TextInput里取值的唯一做法！）
        value={username}
        style={[styles.inputStyle]}
      />
      <TextInput
        placeholder="请输入生日"
        onChangeText={text => setBirthday(text)}
        value={birthday}
        style={[styles.inputStyle]}
      />
      
      <TouchableOpacity style={styles.btnStyle}>
        <Text style={styles.loginText} onPress={()=>onBtn()}>找回密码</Text>
      </TouchableOpacity>

      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: 20,
    paddingTop:40,
  },
  inputStyle: {
    width: '80%',
    height: 35,
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 10,
    borderRadius: 8,
    borderColor: '#cacaca',
    borderWidth: 1,
    borderRadius: 8,
    paddingLeft:15,
  },
  btnStyle: {
    marginLeft: 'auto',
    marginRight: 'auto',
    height: 40,
    width: '80%',
    borderRadius: 5,
    marginTop: 20,
    backgroundColor: '#4398ff',
    justifyContent: 'center', //沿主轴方向居中
},
loginText: {
    textAlign: 'center',//指定文本的对齐方式
    color: 'white',
    textAlignVertical: 'center',//设置文本垂直方向居中
},
})
